<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿</title>
    <link rel="stylesheet" href="./CSS.css">
</head>
<body>
    <!-- 导航栏容器样式 -->
    <div class="navigation-box">
        <nav class="navigation-nav">
        <ul>
            <li><a href="#">请先登录</a></li>
            <li><a href="#">免费注册</a></li>
            <li><a href="#">我的订单</a></li>  
            <li><a href="#">会员中心</a></li>
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a  href="#"><span class="phone-img"></span>手机版</a></li>
        </ul>
        </nav>
    </div>

    <!-- 搜索栏 -->
    <div class="search-box">
        <nav class="search-nav">
            <ul>
                <li><a href="#"><img src="./实验2-小兔鲜儿所用图片/LOGO.PNG" alt="小兔鲜儿"></a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">服饰</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">个护</a></li>
                <li><a href="#">数码</a></li>
                <li><a href="#">运动</a></li>
                <li><a href="#">杂项</a></li>
                <li>
                    <div class="search-container">
                        <div class="glass-img"></div>
                        <input type="text" placeholder="23215220234-黄俊沣" class="search-input">
                    </div>
                </li>
                <li>
                    <div class="shopping-cart"></div>
                </li>
            </ul>
        </nav>
    </div>
    
    <!-- box1 -->
    <div class="box1">
        <div class="wrapper">
            <div class="aside">
                <ul>
                    <li>
                        <a href="#">生鲜</a>
                        <span>
                            水果 蔬菜
                        </span>
                        <span class="aside-img"></span>
                    </li>
                    <li>
                        <a href="#">美食</a>
                        <span>面点 干果</span>
                        <span class="aside-img"></span>
                    </li>
                    <li>
                        <a href="#">餐厨</a>
                        <span>数码产品</span>
                        <span class="aside-img"></span>
                    </li>
                    <li>
                        <a href="#">电器</a>
                        <span>床品 四件套 被枕</span>
                        <span class="aside-img"></span>
                    </li>
                    <li>
                        <a href="#">居家</a>
                        <span>奶粉 玩具 辅食</span>
                        <span class="aside-img"></span>
                    </li>
                    <li>
                        <a href="#">洗护</a>
                        <span>洗发 洗护 美妆</span>
                        <span class="aside-img"></span>
                    </li>
                    <li>
                        <a href="#">孕婴</a>
                        <span>奶粉 玩具</span>
                        <span class="aside-img"></span>
                    </li>
                    <li>
                        <a href="#">服饰</a>
                        <span>女装 男装</span>
                        <span class="aside-img"></span>
                    </li>
                    <li><a href="#">杂货</a>
                        <span>户外 图书</span>
                        <span class="aside-img"></span>
                    </li>
                    <li>
                        <a href="#">品牌</a>
                        <span>品牌制造</span>
                        <span class="aside-img"></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

     <!-- box2 新鲜好物-->
    <div class="box2">
        <div class="wrapper">
            <div class="head">
                <h2>新鲜好物
                    <span>
                        新鲜出炉 品质靠谱
                    </span>
                </h2>
                <a href="#">查看全部</a>
            </div>
            <div class="img-box">
                <ul>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/new_goods_1.jpg" alt="1">
                        <h3>睿米无线吸尘器F8</h3>
                        <span>￥899</span>
                    </li>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/new_goods_2.jpg" alt="2">
                        <h3>智能环绕3D空调</h3>
                        <span>￥1299</span>
                    </li>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/new_goods_3.jpg" alt="3">
                        <h3>广东软软糯米煲仔饭</h3>
                        <span>￥129</span>
                    </li>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/new_goods_4.jpg" alt="4">
                        <h3>罗西机械智能手表</h3>
                        <span>￥3399</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

     <!-- box3 人气推荐-->
     <div class="box3">
        <div class="wrapper">
            <div class="head">
                <h2>人气推荐
                    <span>
                        人气爆款 不容错过
                    </span>
                </h2>
                <a href="#">查看全部</a>
            </div>
            <div class="img-box">
                <ul>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/new_goods_1.jpg" alt="1">
                        <h3>特惠推荐</h3>
                        <span>我猜的到 你的需要</span>

                    </li>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/new_goods_2.jpg" alt="2">
                        <h3>爆款推荐</h3>
                        <span>人气好物推荐</span>
                    </li>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/new_goods_3.jpg" alt="3">
                        <h3>场景使用一站买全</h3>
                        <span>编辑精心整理准备</span>
                    </li>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/new_goods_4.jpg" alt="4">
                        <h3>领券中心</h3>
                        <span>发现更多超值优惠卷   </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- box4 热门品牌-->
    <div class="box4">
        <div class="wrapper">
            <div class="head">
                <h2>热门品牌
                    <span>
                        国际经典 品质保证
                    </span>
            </div>
            <div class="img-box">
                <ul>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/new_goods_1.jpg" alt="1">
                        <h3>特惠推荐</h3>
                        <span>我猜的到 你的需要</span>

                    </li>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/new_goods_2.jpg" alt="2">
                        <h3>爆款推荐</h3>
                        <span>人气好物推荐</span>
                    </li>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/new_goods_3.jpg" alt="3">
                        <h3>场景使用一站买全</h3>
                        <span>编辑精心整理准备</span>
                    </li>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/new_goods_4.jpg" alt="4">
                        <h3>领券中心</h3>
                        <span>发现更多超值优惠卷   </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- box5 生鲜-->
    <div class="box5">
        <div class="wrapper">
            <div class="head">
                <h2>生鲜</h2>
                <ul>
                    <li><a href="#">水果</a></li>
                    <li><a href="#">蔬菜</a></li>
                    <li><a href="#">肉禽蛋</a></li>
                    <li><a href="#">裤装</a></li>
                    <li><a href="#">衬衫</a></li>
                    <li><a href="#">T恤</a></li>
                    <li><a href="#">内衣</a></li>
                </ul>
            </div>
            <div class="img-box">
                <div class="left">
                    <img src="./实验2-小兔鲜儿所用图片/fresh_goods_cover.png" alt="">
                </div>
                <div class="right">
                    <div class="top">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="./实验2-小兔鲜儿所用图片/fresh_goods_1.jpg" alt="">
                                    <p>美威智力原味三文鱼排</p>
                                    <p>240g/袋4片装</p>
                                    <p>海鲜年货</p>
                                    <span>
                                        ￥59
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./实验2-小兔鲜儿所用图片/fresh_goods_2.jpg" alt="">
                                    <p>红功夫麻辣小龙虾</p>
                                    <p>4-6钱/25-32只装</p>
                                    <p>火锅食材</p>
                                    <span>
                                        ￥79
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./实验2-小兔鲜儿所用图片/fresh_goods_3.jpg" alt="">
                                    <p>三都港冷冻无公害黄花鱼</p>
                                    <p>700g 2条 袋装</p>
                                    <p>海鲜水产</p>
                                    <span>
                                        ￥49
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./实验2-小兔鲜儿所用图片/fresh_goods_4.jpg" alt="">
                                    <p>渔公码头 大连鲜食入味</p>
                                    <p>即食海参 辽参刺参</p>
                                    <p>调味海</p>
                                    <span>
                                        ￥899
                                    </span>
                                </a>
                            </li>
                        </ul>
                    
                    </div>
                    <div class="under">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="./实验2-小兔鲜儿所用图片/fresh_goods_5.jpg" alt="">
                                    <p>美威智力原味三文鱼排</p>
                                    <p>240g/袋4片装</p>
                                    <p>海鲜年货</p>
                                    <span>
                                        ￥20
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./实验2-小兔鲜儿所用图片/fresh_goods_6.jpg" alt="">
                                    <p>红功夫麻辣小龙虾</p>
                                    <p>4-6钱/25-32只装</p>
                                    <p>火锅食材</p>
                                    <span>
                                        ￥20
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./实验2-小兔鲜儿所用图片/fresh_goods_7.jpg" alt="">
                                    <p>三都港冷冻无公害黄花鱼</p>
                                    <p>700g 2条 袋装</p>
                                    <p>海鲜水产</p>
                                    <span>
                                        ￥50
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./实验2-小兔鲜儿所用图片/fresh_goods_8.jpg" alt="">
                                    <p>渔公码头 大连鲜食入味</p>
                                    <p>即食海参 辽参刺参</p>
                                    <p>调味海</p>
                                    <span>
                                        ￥60
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部盒子1 -->
    <div class="box-end1">
        <div class="service">
            <div class="customer">
                <h4>客户服务</h4>
                <ul>
                    <li>
                        <a href="#">
                            <span class="img1"></span>
                            <p>在线客服</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="img2"></span>
                            <p>问题反馈</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="about-us">
                <h4>关于我们</h4>
                <ul>
                    <li>
                        <a href="#">
                            <span class="img3"></span>
                            <p>公众号</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="img4"></span>
                            <p>微博</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="download">
                <h4>下载APP</h4>
                <ul>
                    <li>
                        <img src="./实验2-小兔鲜儿所用图片/qrcode.png" alt="二维码" class="img5">
                    </li>
                    <li class="download-right">
                        <p>扫码二维码</p>
                        <p>立即下载APP</p>
                        <a href="#">下载页面</a>
                    </li>
                </ul>
            </div>
            <div class="phone">
                <h4 class="phone-title">服务热线</h4>
                <p>400-800-8888</p>
                <p>周一至周日 8:00-18:00</p>
            </div>
        </div>
    </div>

    <!-- 底部盒子2 -->
    <div class="box-end2">
        <div class="footer">
            <div class="top">
                <ul>
                    <li>
                        <span class="img6"></span>
                        <p>价格亲民</p>
                    </li>
                    <li>
                        <span class="img7"></span>
                        物流快捷
                    </li>
                    <li>
                        <span class="img8"></span>
                        品质新鲜
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">售后服务</a></li>
                    <li><a href="#">配送与验收</a></li>
                    <li><a href="#">商务合作</a></li> 
                    <li><a href="#">搜索推荐</a></li>
                    <li><a href="#">友情链接</a></li>
                </ul>
            </div>
            
        </div>
    </div>
</body>
</html>